import { useEffect, useState, useMemo, memo } from "react";
import { Button, Modal, Steps, Tooltip, Progress } from "antd";
import { UploadOutlined, LogoutOutlined } from "@ant-design/icons";
import { useSelector } from "react-redux";
import "./index.scss";
import { useUpgrade, useVersion } from "./hooks";
import type { GetProp, UploadFile, UploadProps } from "antd";
import FileCard from "./FileCard";
import { getComponent } from "../../macro";

type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];

function UpgradeModel(props) {
  const { close } = props;
  const [showModal] = useState(true);
  const [modalApi, contextHolder] = Modal.useModal();


  const {
    fileState,
    step,
    isVisible,
    progress,
    chooseFileAction,
    upgradeAction,
    removeFileAction
  } = useUpgrade();

  const stepItems = [
    {
      title: "选择"
    },

    {
      title: "升级"
    },
    {
      title: "升级成功"
    }
  ];

  const modalStyles = {
    mask: {
      backgroundColor: "rgb(0, 0, 0)"
    }
  };

  const handleFileInputChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    chooseFileAction(event, modalApi);
  };

  return (
    <>
      <Modal
        open={showModal}
        footer={null}
        closeIcon={null}
        className="upgradeModel"
        styles={modalStyles}
      >
        <div className="flex flex-col size-full">
          <div className="border border-gray-700 rounded px-4 py-2 mb-4 flex justify-between items-center">
            <div className="text-lg">


              电调升级
            </div>
            <Button
              type="primary"
              icon={<LogoutOutlined />}
              size="large"
              danger
              onClick={() => {
                close();
              }}
            >
              退出升级
            </Button>
          </div>
          <div className="flex-1 border border-gray-700 rounded p-4 relative">
            <div className="absolute w-3/5 left-1/2 -translate-x-1/2 top-1/4">
              {progress === 0 ? (
                <Steps
                  current={step.index}
                  items={stepItems}
                  className="upgrade-step"
                />
              ) : (
                <Progress
                  percent={progress}
                  status="active"
                  strokeColor={{ from: "#108ee9", to: "#87d068" }}
                  size={["100%", 30]}
                />
              )}

              {isVisible && (
                <FileCard
                  file={fileState}
                  onRemove={() => {
                    removeFileAction();
                    document.getElementById("fileInput").value = "";
                  }}
                  isDisabled={
                    step.name !== "selectFile" && step.name !== "uploadFile"
                  }
                />
              )}

              <div className="mt-44 flex justify-center">
                <input
                  type="file"
                  style={{ display: "none" }}
                  id="fileInput"
                  onChange={handleFileInputChange}
                />
                <Button
                  icon={<UploadOutlined />}
                  size="large"
                  className={step.name === "selectFile" ? "" : "hidden"}
                  onClick={() => {
                    document.getElementById("fileInput")?.click();
                  }}
                >
                  选择文件
                </Button>

                <Button
                  type="primary"
                  onClick={upgradeAction}
                  size="large"
                  className={step.name === "uploadFile" ? "" : "hidden"}
                  disabled={progress > 0}
                >
                  开始升级
                </Button>
              </div>
            </div>
          </div>
        </div>
        {contextHolder}
      </Modal>
    </>
  );
}
export default memo(UpgradeModel)